<template>
    <h4 class="hh">
        <el-icon><Guide /></el-icon> 标签：
        <el-select-v2
            v-model="value"
            filterable
            :options="tags"
            placeholder="Please select"
            style="width: 850px; margin-left:30px ;"
            multiple
            clearable
            no-data-text="no data"
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="3"
            @change="s1()"
          
            
        />
    </h4>
    <h4 class="hh">
        <el-icon><TopRight /></el-icon> 排序：
        <el-button-group style="margin-left:30px ;" >
            <el-button ><el-icon><Tickets /></el-icon>综合</el-button>
            <el-button ><el-icon><TopRight /></el-icon>最新</el-button>
            <el-button ><el-icon><View /></el-icon>最热</el-button>
        </el-button-group>
    </h4>
    <h4 class="hh">
        <el-icon><Star /></el-icon>  精选：
        <el-switch
            v-model="value3"
            inline-prompt
            active-text="是"
            inactive-text="否"
            style="margin-left:30px ;"
        />
    </h4>
</template>
<script>
export default{
    data(){
        return {
            tags:[
                {value:1,label:"java"},
                {value:2,label:"go"},
                {value:3,label:"py"},
                {value:4,label:"ts"},
                {value:5,label:"js"},
                {value:6,label:"vue"}
            ],
            value:'',
            value3:false
        }
    },methods:{
      s1(){
        //选项框只发生该变时触发
        alert(this.value);
      }
    }
}
</script>
<style>
.select{
  
}
.hh{
    margin-left: 20px;
}
</style>